import React from "react";


import styles from "./index.module.css"
import { weekDay, toDate, getWeekByDate, getDaysInMonth, getFrontDate, getEndDate } from "./config"

export default class MyDate extends React.Component {
    state = {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        date: new Date().getDate(),
        showListDate: [],
        currentDate: null
    }
    componentWillMount() {
        this.getShowList()
    }
    // 获取要展示的日期的列表
    getShowList = () => {
        const { year, month } = this.state
        let showListDate = getDaysInMonth(year, month)
        showListDate = showListDate.map(item => {
            return {
                value: item,
                color: 'red',
                label: item == this.state.date ? 'now' : 'curr'
            }
        })
        let weekValue = getWeekByDate(year, month, showListDate[0].value)
        showListDate = getFrontDate(year, month - 1, weekValue).concat(showListDate)
        showListDate = this.setDateListColor(showListDate, 'prev')
        showListDate = showListDate.concat(getEndDate(year, month + 1, showListDate.length))
        showListDate = this.setDateListColor(showListDate, 'next')
        this.setState({
            showListDate
        })
    }
    // 根据传入的数据进行添加标签 使得可以根据标签改变字体颜色
    setDateListColor = (showListDate, label) => {
        return showListDate = showListDate.map(item => {
            if (typeof item !== 'object') {
                return {
                    value: item,
                    color: 'ddd',
                    label
                }
            }
            return item
        })
    }
    // 点击上下年执行的事件 
    getYear = (type) => {
        let { year } = this.state
        this.setState({
            year: type === 'prev' ? year - 1 : year + 1
        }, this.getShowList)
    }
    // 点击上下月个月执行的事件
    getMonth = (type) => {
        let { month, year } = this.state
        month = type === 'prev' ? (month - 1) : (month + 1)
        if (month === 13) {
            this.setState({
                month: 1,
                year: year + 1
            }, this.getShowList)
        } else if (month === 0) {
            this.setState({
                month: 12,
                year: year - 1
            }, this.getShowList)
        } else {
            this.setState({
                month
            }, this.getShowList)
        }
    }
    // 双击选择日期事件 传入选择的日期
    getSelectDate = (item) => {
        const { value, label } = item
        const { getDateHandle } = this.props
        const { year, month } = this.state
        let months = month
        if (label === 'prev') {
            months = (month - 1) < 0 ? 12 : (month - 1)
        } else if (label === 'next') {
            months = (month + 1) > 13 ? 0 : (month + 1)
        }
        let today = new Date(year, months - 1, value).toLocaleDateString()
        console.log(today);
        getDateHandle(toDate(today))
    }
    // 单击添加边框
    getClickDate = (item) => {
        this.setState({
            currentDate: item
        })
    }
    // 点击今天执行的事件
    todayHandle = () => {
        const { getDateHandle } = this.props
        let today = new Date().toLocaleDateString()
        getDateHandle(toDate(today))
    }
    // 星期的渲染
    weekRender = () => {
        return weekDay.map(item => {
            return (
                <div className={styles['con-item']} key={item.value}>{item.label}</div>
            )
        })
    }
    // 时间的渲染
    dateRender = () => {
        const { showListDate, currentDate } = this.state
        return showListDate.map((item, index) => {
            return (
                <div
                    style={(item.color === 'red' ? (item.label === 'now' ? { background: "rgb(78, 163, 243)", color: "#fff" } : { color: '#000' }) : { color: '#ddd' })}
                    onClick={() => this.getClickDate(item)}
                    className={styles['con-item']}
                    key={index}
                    onDoubleClick={() => this.getSelectDate(item)}
                >
                    <div className={styles['con-item-inter']} style={currentDate === item ? { border: "1px solid blue" } : { border: 0 }}>
                        {item.value}
                    </div>
                </div>
            )
        })

    }
    render() {
        const { showBool } = this.props
        const { year, month } = this.state
        return (
            showBool && (<div className={styles['date-warp']}>
                <div className={styles['date-top']}>
                    <img onClick={() => this.getYear('prev')} src="https://tse1-mm.cn.bing.net/th/id/R-C.6c963212a6d793e3be18377e7f545fd5?rik=KL7nw4R08eNjMA&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f52%2f57%2f6iH325w9gK.jpg&ehk=muIOEkvjY8%2bvet7Fe2Z2K9N0SRaUWXPUb1uzNN8kR8k%3d&risl=&pid=ImgRaw&r=0" />
                    <img onClick={() => this.getMonth('prev')} src="https://tse1-mm.cn.bing.net/th/id/R-C.04de89d7307b5dc1368ffe69b89c1380?rik=HDiGdcs7SIC41A&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f01%2f40%2f62%2f31573d09dc2ccff.jpg&ehk=hYbsXa%2fqME3zNq9ARvmDD%2b39UKPSXe23vgSQhuZWcPI%3d&risl=&pid=ImgRaw&r=0" />
                    <div className={styles['top-date']}>
                        {year}年 <span className={styles['month-date']}>{month}月</span>
                    </div>
                    <img onClick={() => this.getMonth('next')} src="https://tse1-mm.cn.bing.net/th/id/R-C.75d4b025718bfb0361768a5499eebc93?rik=9mUNod5LocpZww&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f84%2f86%2fjQ97I5VGAD.jpg&ehk=EJlFsFuCx5a9180lFa%2b1bE41CrUD2ERgExYtuGbEGh0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" />
                    <img onClick={() => this.getYear("next")} src="https://tse1-mm.cn.bing.net/th/id/R-C.900b6eebb971b3b3c3edc221fb6eef2c?rik=br5%2bZF%2flYktpyQ&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f14%2f95%2fLMcBZSXtcl.jpg&ehk=qB7ucMJMlIGhq%2fHTCPB3Nz%2buDbsXy%2bl1x8goDnFYG3k%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" />
                </div>
                <div className={styles['date-con']}>
                    {this.weekRender()}
                    {this.dateRender()}
                </div>
                <div className={styles['date-bottom']} onClick={this.todayHandle}>
                    今天
                </div>
            </div>)
        )
    }
}